<template>
    <div :class="['todo-item', todo.completed ? 'completed' : '']">
        <input type="checkbox" v-model="todo.completed"/>
        <label>{{todo.content}}</label>
        <button class="item-but" @click="delItem">x</button>
    </div>
</template>

<script>
    export default {
        name: "TodoItem",
        props : {
            todo: Object
        },
        methods:{
            delItem(){
                this.$emit('del', this.todo.id)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .todo-item{
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-top: 1px solid rgba(0,0,0,0.1);
        font-size: 24px;
        &.completed{
            label{
                color: #d9d9d9;
                text-decoration: line-through;
            }
         }
    }
    .todo-item:hover .item-but{
        font-size: 24px;
        color: #0da9ff;
    }
    input {
        width: 50px;
        height: 30px;
        text-align: center;
        appearance: none;
        border: none;
        outline: none;
    }
    input:after{
        content: '';
        display: block;
        width: 30px;
        height: 30px;
        background:url("~img/2.png");
        background-size:cover;
    }
    input:checked:after{
        content: '';
        display: block;
        width: 30px;
        height: 30px;
        background:url("~img/3.png");
        background-size:cover;
    }
    label{
        flex: 1;
        transform: color 0.4s;
    }
    button{
        width: 40px;
        background-color: transparent;
        appearance: none;
        border: none;
        outline: none;
        cursor: pointer;
        color: rgba(255, 255, 255, 0);
    }
</style>